import React,{useState,useEffect} from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  UserOutlined
} from '@ant-design/icons';
import './index.css'
import { Switch,Route,Redirect } from 'react-router-dom';
import AddArticle from '../AddArticle';
import { checkSessionURL } from '../../utils/api'
import { sendActionGet } from '../../utils/axios'
import ArticleList from '../ArticleList';

const { Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

const AdminIndex = (props)=>{

  const [collapsed,setCollapsed] = useState(false)

  useEffect(()=>{
    checkSession()
  },[])

  const onCollapse = collapsed => {
    setCollapsed(collapsed)
  };

  const checkSession=async()=>{
    const res = await sendActionGet(checkSessionURL)
    console.log('123',res)
    if(res.data.data==='未登录'){
        props.history.push('/login')
    }
}

  const handleMenu=(e)=>{
    const {key} = e
    if(key==='1'||key==='2'||key==='3'){
      props.history.push('/index/')
    }else if(key==='4'){
      props.history.push('/index/list')
    }
  }


    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
          <div className="logo">后台管理系统</div>
          <Menu theme="dark" mode="inline" onClick={handleMenu}>
            <Menu.Item key="1" icon={<PieChartOutlined />}>
              工作台
            </Menu.Item>
            <Menu.Item key="2" icon={<DesktopOutlined />}>
              添加文章
            </Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="文章管理">
              <Menu.Item key="3">添加文章</Menu.Item>
              <Menu.Item key="4">文章列表</Menu.Item>
            </SubMenu>
            <Menu.Item key="9" icon={<FileOutlined />}>
              留言管理
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>后台管理</Breadcrumb.Item>
              <Breadcrumb.Item>工作台</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
            <Switch>
              <Route path='/index/' exact component={AddArticle}/>
              <Route path='/index/list' component={ArticleList} />
              <Route path='/index/updateArticle/:id' component={AddArticle}/>
              <Redirect to='/index/'/>
            </Switch>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>designed by xiaoxiaojiang</Footer>
        </Layout>
      </Layout>
    )

}

export default AdminIndex